<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-21 14:08:57
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-26 19:12:06
 * @FilePath: \客户端\app\src\views\Article\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEicle
-->
<template>
  <div class="content">
    <div class="main">
      <div class="left">
        <div class="play">
          <div class="play-box">
            <el-carousel>
              <el-carousel-item v-for="item in imgList" :key="item">
                <img :src="item.img" alt="" style="width: 100%; height: 100%" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <el-card class="articleLists">
          <div>
            <span @click="all" class="active">所有</span>
            <span
              @click="classFn(v, i)"
              v-for="(v, i) in classLists"
              :key="i"
              class="spanItem"
              >{{ v.title }}</span
            >
          </div>
          <div class="article">
            <dl v-for="(v, i) in data" :key="i" class="dl" @click="detail(v)">
              <p>
                <b>{{ v.title }}</b> {{ getDate(v.date) }}
              </p>
              <dt class="dt">
                <img :src="v.img" alt="" />
                <p>
                  <span>{{ v.classes }}</span>
                  <span class="icons">
                    <el-icon><Star /></el-icon>0 ·
                    <el-icon><HelpFilled /></el-icon> 120 ·
                    <el-icon><Share /></el-icon> 分享
                  </span>
                </p>
              </dt>
            </dl>
          </div>
        </el-card>
      </div>

      <div class="text">
        <RightBox />
      </div>
    </div>
  </div>
</template>
<script>
import {
  asyncArticleLists,
  asyncTagLists,
  asyncClassLists,
} from "../../api/article";
import { Star, HelpFilled, Share } from "@element-plus/icons-vue";
import RightBox from "../../components/RightBox.vue";
import { formatTime } from "../../utils/moment";

export default {
  components: {
    formatTime,
    RightBox,
    Star,
    HelpFilled,
    Share,
  },

  data() {
    return {
      imgList: [],
      data: [],
      tagList: [],
      classLists: [],
      tag: [],
    };
  },
  created() {
    this.init();
  },

  methods: {
    init() {
      this.getArticleLists();
      this.getTagLists();
      this.getClassLists();
    },
    async getArticleLists() {
      const res = await asyncArticleLists("/articleImg");
      console.log(res, "llll");
      this.imgList = res.data.list.filter((v) => v.state == "true");
      this.data = res.data.list;
      console.log(res.data.list, "jjj");
    },
    // 标签
    async getTagLists() {
      const res = await asyncTagLists("/tagLists");
      // console.log(res)
      this.tagList = res.data.list;
    },
    // 分类
    async getClassLists() {
      const res = await asyncClassLists("/classLists");
      console.log(res);
      this.classLists = res.data.list;
    },
    // 所有
    async all() {},
    classFn(v, i) {
      console.log(v, i);
      this.$router.push({
        path: "/layout/articleItem",
        query: { title: v.title, i: i },
      });
    },
     detail(v){
      console.log(v)
        this.$router.push({
        path: "/layout/detail",
        query: { 
          detailId:v.id,
        },
      });
      
    }
  },
  computed: {
    getDate() {
      return function (val) {
        var timestamp = new Date(val).getTime();
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var year = day * 365;
        var now = new Date().getTime();
        var diffValue = now - timestamp;
        var result;
        if (diffValue < 0) {
          return;
        }
        var yearC = diffValue / year;
        var monthC = diffValue / month;
        var weekC = diffValue / (7 * day);
        var dayC = diffValue / day;
        var hourC = diffValue / hour;
        var minC = diffValue / minute;
        if (yearC >= 1) {
          result = "" + parseInt(yearC) + "年前";
        } else if (monthC >= 1) {
          result = "" + parseInt(monthC) + "月前";
        } else if (weekC >= 1) {
          result = "" + parseInt(weekC) + "周前";
        } else if (dayC >= 1) {
          result = "" + parseInt(dayC) + "天前";
        } else if (hourC >= 1) {
          result = "" + parseInt(hourC) + "小时前";
        } else if (minC >= 1) {
          result = "" + parseInt(minC) + "分钟前";
        } else result = "刚刚";
        return result;
      };
    },
  },
};
</script>
<style lang="less" scoped>
.spanItem:hover {
  color: red;
}

@media (min-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      .left {
        width: 50%;
        height: 100%;
        margin-left: 130px;
        .play {
          width: 100%;
          height: 80%;
          margin: 10px;
          .play-box {
            width: 98%;
            height: 95%;
            margin: 5px 5px 5px 5px;
          }
        }
      }
      .articleLists {
        width: 100%;
        margin-left: 10px;
        margin-top: 20px;

        .spanItem {
          margin: 10px;
        }

        .article {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          flex-shrink: 0;

          .dl {
            width: 80%;
            display: flex;
            flex-direction: column;
            padding: 10px;

            b {
              padding: 5px;
            }
            img {
              width: 40%;
              padding: 5px;
            }

            dt {
              display: flex;
              // align-items: flex-start;
              // flex-wrap: wrap;
              flex-shrink: 0;
              // position: relative;
              span {
                padding: 10px;
              }
              p {
                display: flex;
                flex-direction: column;

                .icons {
                  // bottom: 10px;
                  // position: absolute;
                  // left: 250px;
                  margin-top: 80px;
                }
              }
            }
          }
        }
      }
      // 右侧
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 60px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 870px) and (max-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 70%;
      margin-left: auto;
      margin-right: auto;

      .left {
        width: 55%;
        height: 100%;
        margin-left: 20px;
        .play {
          width: 100%;
          height: 80%;
          // margin: 10px;
          border: 1px solid #ccc;
          background: #fff;
          .play-box {
            width: 97%;
            height: 95%;
            padding: 5px 5px 5px 5px;
            border: 1px solid #ccc;
          }
        }

        .articleLists {
          width: 100%;
          // margin-left: 0px;
          margin-top: 20px;
          span {
            font-size: 10px;
          }
          .spanItem {
            margin: 10px;
            font-size: 10px;
          }

          .article {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex-shrink: 0;

            .dl {
              width: 80%;
              display: flex;
              flex-direction: column;
              padding: 10px;

              b {
                padding: 5px;
              }
              img {
                width: 40%;
                // height: 100%;
                padding: 5px;
              }

              dt {
                display: flex;
                // align-items: flex-start;
                // flex-wrap: wrap;
                // position: relative;
                span {
                  padding: 10px;
                }
                p {
                  display: flex;
                  flex-direction: column;

                  .icons {
                    // bottom: 10px;
                    // position: absolute;
                    // left: 250px;
                    margin-top: 40px;
                  }
                }
              }
            }
          }
        }
      }
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 60px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 20px) and (max-width: 870px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      .left {
        width: 100%;
        height: 100%;

        .play {
          width: 98%;
          height: 27%;
          margin: 10px;
          border: 1px solid #ccc;

          .play-box {
            width: 98%;
            height: 93%;
            margin: 10px auto;
            border: 1px solid #ccc;
            img {
              height: 100%;
              // width: 100%;
            }
          }
        }

        .articleLists {
          width: 98%;
          margin-left: 10px;
          margin-top: 20px;
          span {
            // font-size: 10px;
          }
          .spanItem {
            margin: 10px;
            // font-size: 10px;
          }

          .article {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex-shrink: 0;

            .dl {
              width: 80%;
              display: flex;
              flex-direction: column;
              padding: 10px;

              b {
                padding: 5px;
              }
              img {
                width: 40%;
                padding: 5px;
              }

              dt {
                display: flex;
                // align-items: flex-start;
                flex-wrap: wrap;
                // position: relative;
                span {
                  padding: 10px;
                }
                 p {
                  display: flex;
                  flex-direction: column;

                  .icons {
                    // bottom: 10px;
                    // position: absolute;
                    // left: 250px;
                    // margin-top: 40px;
                  }
                }
              }
            }
          }
        }
      }

      .text {
        display: none;
        width: 30%;
        margin: 20px;
        height: 100px;
        position: fixed;
        top: 60px;
        right: 90px;
        border: 1px solid #ccc;

        .text-one {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
          margin-top: 20px;
        }
        .text-two {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>

